<template>
  <div class="donate">
    <div class="donate-box">
      <h4>认养信息</h4>
      <div class="donate-row">
        <div class="donate-row-l">
          认捐时间
        </div>
        <div class="donate-row-r">
          {{today}}
        </div>
      </div>
      <div class="donate-row">
        <div class="donate-row-l">
          认捐树种
        </div>
        <div class="donate-row-r">
          {{treeType}}
        </div>
      </div>
      <div class="donate-row">
        <div class="donate-row-l">
          认捐时效
        </div>
        <div class="donate-row-r">
          10年
        </div>
      </div>
      <div class="donate-row">
        <div class="donate-row-l">
          认捐金额
        </div>
        <div class="donate-row-r" style="color: red;">
          ¥{{treeMoney}}
        </div>
      </div>
    </div>
    <div class="donate-box">
      <h4>捐赠人信息</h4>
      <div class="donate-row">
        <div class="donate-row-l">
          <span style="color: red;">*</span> 认捐类型
        </div>
        <div class="donate-row-r">
          <el-select v-model="form.type" placeholder="请选择认捐类型">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="donate-row">
        <div class="donate-row-l">
          <span style="color: red;">*</span> 联系人
        </div>
        <div class="donate-row-r">
          <el-input v-model="form.person" placeholder="请填写真实姓名，用于信息核对"></el-input>
        </div>
      </div>
      <div class="donate-row">
        <div class="donate-row-l">
          <span style="color: red;">*</span> 联系电话
        </div>
        <div class="donate-row-r">
          <el-input v-model="form.phone" placeholder="手机电话，便于核对信息"></el-input>
        </div>
      </div>
      <!-- <div class="donate-row">
        <div class="donate-row-l">
          <span style="color: red;">*</span> 是否需要纪念币
        </div>
        <div class="donate-row-r" style="width: 60%;">
          <el-radio-group v-model="form.souvenir">
            <el-radio :label="0">不需要</el-radio>
            <el-radio :label="1">需要</el-radio>
          </el-radio-group>
        </div>
      </div> -->
      <div class="donate-row" v-if="form.souvenir==1">
        <div class="donate-row-l">
          邮寄地址
        </div>
      </div>
      <div class="donate-row" v-if="form.souvenir==1">
        <!-- 省选择 -->
        <el-select v-model="selectedProvince" placeholder="省份" clearable @change="handleProvinceChange">
          <el-option v-for="province in provinceList" :key="province.name" :label="province.name"
            :value="province.name" />
        </el-select>

        <!-- 市选择（省份选择后才显示） -->
        <el-select v-model="selectedCity" placeholder="城市" clearable @change="handleCityChange" style="margin: 0 5px;">
          <el-option v-for="city in cityList" :key="city.name" :label="city.name" :value="city.name" />
        </el-select>

        <!-- 县选择（城市选择后才显示） -->
        <el-select v-model="selectedArea" placeholder="区县" clearable>
          <el-option v-for="area in areaList" :key="area.id" :label="area.name" :value="area.name" />
        </el-select>
      </div>
      <!-- <div class="donate-row" v-if="form.souvenir==1">
        <div class="donate-row-l">
          <span style="color: red;">*</span> 详细地址
        </div>
      </div> -->
      <div class="donate-row" v-if="form.souvenir==1">
        <el-input type="textarea" v-model="form.detailAddress" placeholder="国内邮寄地址仅用于邮寄纪念品"></el-input>
      </div>
      <!-- <div class="donate-row">
        <div class="donate-row-l">
          <span style="color: red;">*</span> 邮箱
        </div>
        <div class="donate-row-r">
          <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
        </div>
      </div> -->
    </div>
    <div class="donate-box">
      <h4>树牌信息</h4>
      <div class="donate-row">
        <div class="donate-row-l">
          <span style="color: red;">*</span> 认捐名称
        </div>
        <div class="donate-row-r">
          <el-input v-model="form.donateName" placeholder="请输入认捐人姓名或集体名称"></el-input>
        </div>
      </div>
      <div class="donate-row">
        <div class="donate-row-l">
          <span style="color: red;">*</span> 名牌寄语
        </div>
      </div>
      <div class="donate-row">
        <el-input type="textarea" v-model="form.message" placeholder="请输入寄语，将展示在认捐树牌上，限30字内" maxlength="30"></el-input>
      </div>
    </div>
    <div class="donate-btn" @click="save()">
      确认认捐
    </div>

  </div>
</template>

<script>
  import dataJson from '../../components/area.js' // 引入 area.js 数据
  import {
    orderSave,
    getTree
  } from '../../api/user.js'
  export default {
    data() {
      return {
        treeId: '',
        today: '',
        treeType: '',
        treeMoney: '',
        form: {
          type: '',
          donateName: '',
          person: '',
          phone: '',
          email: '',
          message: '',
          souvenir: 1,
          province: '',
          city: '',
          district: '',
          street: '',
          detailAddress: '',
        },
        options: [{
          value: 1,
          label: '个人'
        }, {
          value: 2,
          label: '集体'
        }],
        provinceList: dataJson, // 省份列表
        cityList: [], // 城市列表，根据省份动态加载
        areaList: [], // 区县列表，根据城市动态加载
        selectedProvince: null, // 选中的省份
        selectedCity: null, // 选中的城市
        selectedArea: null // 选中的区县
      };
    },
    created() {
      this.treeId = this.$route.query.id
      this.getToday()
      this.getTreeInfo()
    },
    methods: {
      getToday() {
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1; // 月份是从0开始的，所以需要+1
        const day = date.getDate();
        const today = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
        this.today = today
      },
      getTreeInfo() {
        this.treeId = this.$route.query.id
        getTree(this.treeId).then(response => {
          this.treeType = response.data.name
          this.treeMoney = response.data.price
        }).catch(error => {
          reject(error)
        })
      },
      // 处理选择变化
      // 省份改变时触发
      handleProvinceChange(province) {
        this.provinceList.forEach((item, index) => {
          if (item.name === province) {
            this.cityList = item.city || [] // 获取当前省份下的城市列表
          }
        })
        this.selectedCity = null // 清空已选城市
        this.areaList = [] // 清空已选区县
        this.selectedArea = null
      },
      // 城市改变时触发
      handleCityChange(city) {
        this.cityList.forEach((item, index) => {
          if (item.name === city) {
            this.areaList = item.area || [] // 获取当前城市下的区县列表
          }
        })
        this.selectedArea = null // 清空已选区县
      },
      saveAddress() {
        console.log('Address saved:', this.addressData);
      },


      save() {
        const phoneRegex = /^1[34578]\d{9}$/;
        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        if (!this.form.type) {
          this.$message({
            message: '认捐类型不能为空',
            type: 'warning'
          });
          return false
        }
        if (!this.form.person) {
          this.$message({
            message: '联系人不能为空',
            type: 'warning'
          });
          return false
        }
        if (!this.form.phone) {
          this.$message({
            message: '联系电话不能为空',
            type: 'warning'
          });
          return false
        }
        if (!phoneRegex.test(this.form.phone)) {
          this.$message({
            message: '联系电话不正确',
            type: 'warning'
          });
          return false;
        }
        // if (!this.form.email) {
        //   this.$message({
        //     message: '邮箱不能为空',
        //     type: 'warning'
        //   });
        //   return false
        // }
        // if (!emailRegex.test(this.form.email)) {
        //   this.$message({
        //     message: '邮箱不正确',
        //     type: 'warning'
        //   });
        //   return false;
        // }
        // if (this.form.souvenir == 1) {

        // }
        // if (!this.selectedProvince ) {
        //   this.$message({
        //     message: '省份不能为空',
        //     type: 'warning'
        //   });
        //   return false
        // }
        // if ( !this.selectedCity ) {
        //   this.$message({
        //     message: '城市不能为空',
        //     type: 'warning'
        //   });
        //   return false
        // }
        // if (!this.selectedArea) {
        //   this.$message({
        //     message: '区县不能为空',
        //     type: 'warning'
        //   });
        //   return false
        // }
        // if (!this.form.detailAddress) {
        //   this.$message({
        //     message: '详细地址不能为空',
        //     type: 'warning'
        //   });
        //   return false
        // }
        if (!this.form.donateName) {
          this.$message({
            message: '认捐名称不能为空',
            type: 'warning'
          });
          return false
        }
        if (!this.form.message) {
          this.$message({
            message: '名牌寄语不能为空',
            type: 'warning'
          });
          return false
        }


        let params = {
          aging: 10,
          treeId: this.treeId,
          type: this.form.type,
          donateName: this.form.donateName,
          person: this.form.person,
          phone: this.form.phone,
          email: this.form.email,
          message: this.form.message,
          souvenir: this.form.souvenir,
          province: this.selectedProvince ? this.selectedProvince : '',
          city: this.selectedCity ? this.selectedCity : '',
          district: this.selectedArea ? this.selectedArea : '',
          detailAddress: this.form.detailAddress ? this.form.detailAddress : '',
        }
        orderSave(params).then(response => {
          this.$message({
            message: '提交成功',
            type: 'success'
          });
          setTimeout(() => {
            // this.form.type = ''
            // this.form.donateName = ''
            // this.form.person = ''
            // this.form.phone = ''
            // this.form.email = ''
            // this.form.message = ''
            // this.form.souvenir = 0
            // this.selectedProvince  = ''
            // this.selectedCity = ''
            // this.selectedArea = ''
            // this.form.detailAddress = ''
            window.location.href =
              'weixin://dl/business/?appid=wx01f73ae3c5cbd8f3&path=pkgDonate/pages/detail&query=id%3D42'
          }, 1500)

        }).catch(error => {
          reject(error)
        })
      },

    },
  };
</script>

<style lang="scss" scoped>
  .donate {
    background: rgba(248, 248, 248, 1);
    padding: 10px;
    color: #333;
    font-size: 14px;
  }

  .donate-box {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;

    .donate-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 15px;

      .donate-row-l {
        color: #666;
      }

      .donate-row-r {
        width: 70%;
        text-align: right;
      }
    }
  }

  .donate-btn {
    background: rgba(255, 73, 48, 1);
    color: #fff;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 5px;
  }
</style>
<style lang="scss">
  .donate-row-r {
    .el-input__inner {
      // border: none;
      text-align: right;
    }
  }
</style>
